<template>
  <div id="stayWriteTable">
    <!-- 顶部 -->
    <div class="header">
      <component :is="header"></component>
    </div>
    <!-- 顶部end -->
    <!-- 中间内容-->
    <div class="content">
      <b-row>
        <!-- 左侧内容 -->
        <b-col cols="8">
          <div class="left-aside">
            <!-- 待填写收集表列表 -->
            <div class="block">
              <div class="title">
                <span>待填写收集表:</span>
              </div>
              <el-timeline>
                <el-timeline-item
                  placement="top"
                  v-for="(item,index) in stayWriteTableList"
                  :key="index"
                >
                  <el-card>
                    <h4 @click="skipTableDetails(item.collectionId)">{{item.title}}</h4>
                    <p v-html="item.info"></p>
                    <p>提交于{{item.createTime}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
            <!-- 待填写收集表列表end -->
          </div>
        </b-col>
        <!-- 左侧内容end -->
        <!-- 右侧内容 -->
        <b-col cols="4">
          <div class="right-aside">
            <component :is="notice"></component>
          </div>
        </b-col>
        <!-- 右侧内容end -->
      </b-row>
    </div>
    <!-- 中间内容end -->
    <!-- 底部 -->
    <div class="footer">
      <component :is="footer"></component>
    </div>
    <!-- 底部end -->
  </div>
</template>
<script>
import StudentsHeader from "../../components/StudentHeader.vue";
import StudentsIndex from "../../components/StudentsIndex.vue";
import Footer from "../../components/Footer.vue";
export default {
  name: "filledTable",
  data() {
    return {
      // 待填写表列表
      stayWriteTableList: [],
      collectionId: "",
      // 定义组件
      header: "StudentsHeader",
      notice: "StudentsIndex",
      footer: "Footer"
    };
  },
  components: {
    StudentsHeader,
    StudentsIndex,
    Footer
  },
  created() {
    // 获取跳转时带过来的id
    this.collectionId = this.$route.query.collectionId;
    this.selectFilledTableList();
  },
  methods: {
    // 查看收集表列表
    selectFilledTableList() {
      this.$get(this.$urlPath.collection + "/collection/selfConstraint/")
        .then(resp => {
          if (resp.code == 200) {
            if (resp.data == null) {
              this.stayWriteTableList = null;
              this.$message({
                message: "暂无数据",
                type: "error"
              });
            } else {
              this.stayWriteTableList = resp.data;
            }
          }
          console.log("++++++++++++++++++++");
          console.log(resp);
        })
        .catch(error => {
          console.log(error);
        });
    },
    // 查看收集表列表end
    skipTableDetails(collectionId) {
      this.$router.push({
        path: "/studentsDetails" + "?collectionId=" + collectionId
      });
    }
  }
};
</script>
<style lang="less">
@import "../../assets/less/tableList.less";
</style>